<!DOCTYPE html>
<html>
  <head>
  <title>Google Maps Demo</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBh8Yd4juQ0JdWXusENjX9KfS18kUA5teM&sensor=true">
    </script>
    
    <script type="text/javascript">
    function initialize() {
    	var mapOptions = {
    			center: new google.maps.LatLng(-34.397, 150.644),
    			zoom: 8
    	};
    	var map = new google.maps.Map(document.getElementById("map-canvas"),
    			mapOptions);
    	
    	var marker = new google.maps.Marker({
    	    position: map.getCenter(),
    	    map: map,
    	    title: 'Click to zoom'
    	  });

    	  google.maps.event.addListener(map, 'center_changed', function() {
    	    // 3 seconds after the center of the map has changed, pan back to the
    	    // marker.
    	    window.setTimeout(function() {
    	      map.panTo(marker.getPosition());
    	    }, 3000);
    	  });

    	  google.maps.event.addListener(marker, 'click', function() {
    	    map.setZoom(8);
    	    map.setCenter(marker.getPosition());
    	  });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    
    
    
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>
